<template>
	<view class="" style="display: flex;align-items:center;margin-top: 20rpx;">
		<image :src="props.img" mode="" style="width: 160rpx;height: 160rpx;"></image>
		<view style="flex: 1;margin:0 30rpx;">
			<text style="font-weight: bold;">{{props.name}}</text>
			<br/>
			<text style="color: #858585;font-size: 26rpx;">{{props.description}}</text>
			<view style="display: flex;align-items: center;justify-content: space-between;">
				<text style="font-weight: bold;">￥{{props.price}}</text>
			    <view @click="toggle('center')" style="font-size: 38rpx;background-color: #0451bc; width: 42rpx;height: 42rpx;color: white;border-radius: 50%;text-align: center;line-height: 40rpx;">
			    	+
			    </view>
			</view>
		</view>
		
		
		<uni-popup ref="popup" background-color="#fff" @change="change">
			<view class="box-01">
				<view class="box-02">
					<image @click="onclose" class="img-01" src="../../static/wu/fanhui.png" mode="widthFix"></image>
					<image @click="onclose" class="img-03" src="../../static/wu/esc.png" mode="widthFix"></image>
		
				</view>
				<!-- 奶茶图片 -->
				<image class="img-02" src="../../static/danpin/naicha/招牌芋圆奶茶.jpg" mode="widthFix"></image>
		
				<view class="box-03">
					<text class="text-1">手捣芋头红茶</text>
					<text class="text-2">甄选优质芋头制成的微带颗粒感的芋泥铺于杯底，搭配Q弹芋圆，最后混入自带玫瑰香气的滇南大叶红茶制成的香滑奶茶，入口浓郁，层次丰富。</text>
				</view>
				<!-- 规格 -->
				<text>规格</text>
				<view class="box-04">
					<view>中杯</view>
					<view>大杯</view>
					<view>中杯换牛乳</view>
					<view>大杯换牛乳</view>
				</view>
		
		
		
				<!-- 换糖 -->
				<view>换糖</view>
				<view class="box-06">
					<view class="box-07"> 0卡糖￥1</view>
					<image class="img-03" src="../../static/wu/？？.png" mode="widthFix"></image>
				</view>
		
				<!-- 甜度 -->
				<text>甜度</text>
				<view class="box-04">
					<view>全糖</view>
					<view>七分糖</view>
					<view>五分糖</view>
					<view>三分糖</view>
					<view style="width: 265rpx;">去糖（不额外加糖）</view>
				</view>
		
				<!-- 温度 -->
				<text>温度</text>
				<view class="box-05">
					<view>正常冰</view>
					<view>少冰</view>
				</view>
		
				<text>包装</text>
				<view class="box-05">
					<view style="width: 185rpx">单杯保温袋￥1</view>
					<view style="width: 185rpx;">双杯保温袋￥1.5</view>
				</view>
		
		
				<!-- 底部 -->
				<view class="box-bottom">
					<!-- 上 -->
					<view class="bottom-1">
						<!-- 左边 -->
						<view>
							<view>￥13</view>
							<view class="bottom-text4">全糖，正常冰</view>
						</view>
						<!-- 右边 -->
						<view class="bottom-2">
							<view class="bottom-text1">-</view>
							<text class="bpttom-text3">1</text>
							<view class="bottom-text2">+</view>
						</view>
					</view>
					<!-- 下 加入图购物车 -->
					<view class="bottom-3">
						加入购物车
					</view>
				</view>
		
			</view>
		</uni-popup>
		
		
		
	</view>
</template>

<script setup>
	const props = defineProps(['name', 'description', 'price', 'img'])
		
import { getCurrentInstance } from 'vue';

const currentInstance = getCurrentInstance()

 function toggle(type) {
			// this.type = type
	   currentInstance.ctx.$refs.popup.open(type);
	    }

function onclose() {
	console.log(1111111,currentInstance);
    currentInstance.ctx.$refs.popup.close(false)
}
	
</script>

<style>
	.bottom-text4{
		    font-size: 21rpx;
		    margin-top: 18rpx;
		    color: gray;
	}
	.box-01 {
		width: 580rpx;
		height: 1098rpx;
		background-color: white;
		margin: auto;
		padding: 56rpx 29rpx 0 29rpx;
		overflow: scroll;
		position: relative;
	}
	
	.img-03 {
		width: 44rpx;
	}
	
	.img-01 {
		width: 46rpx;
		margin: 0 20rpx 0 429rpx;
	}
	
	.img-02 {
		width: 210rpx;
		left: 50%;
		margin-left: 170rpx;
	}
	
	.box-03 {
		margin: 30rpx 0 0 30rpx;
		display: flex;
		flex-wrap: wrap;
	}
	
	.text-1 {
		font-size: 36rpx;
	}
	
	.text-2 {
		font-size: 27rpx;
		margin: 18rpx 0 20rpx 0;
		color: #9b9b9b;
	}
	
	/* 规格 */
	.box-04 {
		display: flex;
		flex-wrap: wrap;
		text-align: center;
		margin-top: 20rpx;
		height: 162rpx;
	
	}
	
	.box-04>view {
		width: 148rpx;
		height: 57rpx;
		line-height: 57rpx;
		background-color: #f8f8f8;
		font-size: 23rpx;
		margin-right: 20rpx;
	}
	
	/* 换糖*/
	.img-04 {
		width: 51rpx;
	}
	
	.box-07 {
		width: 148rpx;
		height: 57rpx;
		line-height: 57rpx;
		background-color: #f8f8f8;
		font-size: 23rpx;
	}
	
	.box-06 {
		display: flex;
		flex-wrap: wrap;
		text-align: center;
	}
	
	.box-08 {
		display: flex;
		flex-wrap: wrap;
	}
	
	.img-03 {
		width: 51rpx;
	}
	
	/* 温度包装 */
	.box-05 {
		display: flex;
		flex-wrap: wrap;
		text-align: center;
		margin-top: 20rpx;
		/* height: 162rpx; */
	}
	
	.box-05>view {
		width: 148rpx;
		height: 57rpx;
		line-height: 57rpx;
		background-color: #f8f8f8;
		font-size: 23rpx;
		margin-right: 20rpx;
	}
	
	/* 底部 */
	.box-bottom {
		height: 188rpx;
		background-color: white;
		position: sticky;
		bottom: 0;
		padding: 40rpx 0 74rpx 0;
	}
	
	.bottom-1 {
		display: flex;
		justify-content: space-between;
	}
	
	.bottom-2 {
		display: flex;
	}
	
	.bottom-text1,
	.bottom-text2 {
		width: 43rpx;
		height: 43rpx;
		border-radius: 50%;
		border: #9b9b9b 1rpx solid;
		text-align: center;
		line-height: 43rex;
		color: #9b9b9b;
	}
	
	.bottom-text2 {
		border: #1e4fbe 1rpx solid;
		background-color: #1e4fbe;
		color: white;
	}
	
	.bpttom-text3 {
		margin: 0 20rpx;
	}
	
	.bottom-3 {
		background-color: #1e4fbe;
		height: 90rpx;
		width: 568rpx;
		margin: auto;
		border-radius: 50rpx;
		bottom: 80rpx;
		color: white;
		line-height: 90rpx;
		text-align: center;
		margin-top: 50rpx;
	}
</style>
